<!-- 基本信息组件 -->
<template>
  <div id="basicInformation" :class="{ supplierClass: this.$route.params.store == 'supplier' }">
    <section id="edit-a">
      <ul class="number_power">
        <li>
          <span class="left-text">{{ $i18n.t('base.productName') }}</span>
          <input :class="{'main-color':cargon_data.title}" type="text" v-model="cargon_data.title" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.productName')" @blur="clearSrcoll()">
        </li>
        <li>
          <span  class="left-text">{{ $i18n.t('base.productUnit') }}</span>
          <input type="text" v-model="cargon_data.sku" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.productUnit')" @blur="clearSrcoll()">
        </li>
      </ul>
    </section>

    <section class="good-category" ref="classify"   @click="seleRegional">
      <div><span>{{ $i18n.t('base.productCategory') }}</span><span class="good-category-tips" :class="{'main-color':regional}">{{ regional|| this.$i18n.t('base.pleaseSelect') + ' ' + this.$i18n.t('base.productCategory') }}</span></div>
      <div><van-icon name="arrow" /></div>
    </section>

    <section id="edit-b">
        <div class="left-text">{{ $i18n.t('base.productImage') }}
        </div>
        <div style="text-align: center;">
          <div>
            <van-uploader :after-read="onRead">
              <img v-if="imageUrl" :src="imageUrl" style="width: 6.1875rem;height: 6.1875rem;border-radius: 0.5rem;" class="avatar"/>
              <div v-else  class="otherphoto-uploader"></div>
            </van-uploader>
          </div>
        </div>
    </section>
    <section class="otherphoto"
      style="background: white; margin-top: 0.625rem; padding-bottom: 10px; box-sizing: border-box;"
      v-if="!$route.params.goods_id">
      <div class="flex details"   v-if="$route.params.store !== 'store'">
        <div class="left-text">{{ $i18n.t('base.productDetails') }}</div>
        <div style="text-align: center;" class="clearfloat imgflex">
          <van-field v-model="shopText" type="textarea" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.productDetails')+ ' ' + $i18n.t('base.text')" v-if="isType && minStore" />
        </div>
      </div>
      <div class="flex">
        <div class="left-text" style="margin-right: 1.2813rem;">{{ $i18n.t('base.productDetailImage') }}</div>
        <div style="text-align: center;" class="clearfloat  imgflex">
          <template v-for="(val, index) in fileList2">
            <div class="photobox" :key="index">
              <img :src="val.url" style="width: 100%;" />
              <i @click="removeImg(index)"></i>
            </div>
          </template>
          <van-uploader :after-read="multipleMethod_1" multiple>
            <div class="otherphoto-uploader"></div>
          </van-uploader>
        </div>

      </div>
    </section>

    <section class="otherphoto"  style="flex-direction: row;">
      <div class="left-text">{{ $i18n.t('base.otherImages') }}</div>
      <div style="text-align: center;" class="clearfloat  imgflex">
        <template v-for="(val, index) in fileList4">
          <div class="photobox" :key="index">
            <img :src="val.url" style="width: 100%;" />
            <i @click="removeImg_1(index)"></i>
          </div>
        </template>
        <van-uploader :after-read="multipleMethod_2" multiple>
          <div class="otherphoto-uploader"></div>
        </van-uploader>
      </div>
    </section>

    <section id="edit-c">
      <ul class="number_power">
        <li>
          <span class="left-text">{{ $i18n.t('base.currentPrice') }}</span>
          <input type="number" v-model="cargon_data.price" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.currentPrice')" @blur="clearSrcoll()">
        </li>
        <li>
          <span class="left-text">{{ $i18n.t('base.originalPrice') }}</span>
          <input type="number" v-model="cargon_data.market_price" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.originalPrice')" @blur="clearSrcoll()">
        </li>
        <li>
          <span class="left-text">{{ $i18n.t('base.cost') }}</span>
          <input type="number" v-model="cargon_data.cost_price" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.cost')" @blur="clearSrcoll()">
        </li>
      </ul>
    </section>
    <section id="edit-d">
      <ul class="number_power">
        <li>
          <span class="left-text">{{ $i18n.t('base.inventory') }}</span>
          <input type="number" v-model="cargon_data.stock" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.inventory')" @blur="clearSrcoll()">
        </li>
      </ul>
    </section>
    <section id="edit-c" v-if="this.$route.params.store == 'store'">
      <ul class="number_power">
        <li>
          <span class="left-text">{{ $i18n.t('base.code') }}</span>
          <input type="number" v-model="cargon_data.goods_sn" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.code')" @blur="clearSrcoll()">
        </li>
      </ul>
      <ul class="number_power">
        <li>
          <span class="left-text">{{ $i18n.t('base.barcode') }}</span>
          <input type="number" v-model="cargon_data.product_sn" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.barcode')" @blur="clearSrcoll()">
        </li>
      </ul>
    </section>
    <div class="bottomPlaceholder"></div>
    <van-popup @click-overlay="isCoverLayer" v-model="dateshow_1" round position="bottom" :overlay="true" class="fenleiDiv">
      <van-picker :columns="columns" @change="onChange" @cancel="onCancelbtn" @confirm="onConfirmbtn" show-toolbar />
    </van-popup>
  </div>
</template>

<script>
import basicInformation from "./basicInformation_controller.js";

export default basicInformation;
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
input::placeholder{
  font-size: 0.8125rem;
  color: #AAAAB3;
}
.main-color{
  color: #00001C;
}
.value-class{
  font-size: 0.8125rem;
  color: #AAAAB3;

}
::v-deep .otherphoto .van-cell {
  padding: 0;
}
.left-text {
  font-size: 0.875rem;
  font-weight: normal;
  color: #00001C;
  margin-right: 2.1563rem;
  flex-shrink: 0;
}

.good-category {
  padding: 1.0625rem 0.75rem;
  box-sizing: border-box;
  height: 3rem;
  background-color: #fff;
  line-height: 3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  .good-category-tips{
    margin-left: 2.1563rem;
    color: #AAAAB3;
    font-size: 0.8125rem;
  }
  .van-icon{
    color: #AAAAB3 !important;
  }
  .main-color{
    color: #00001C;
  }
}

// 选择分类
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  border:1px dotted #c0ccda;
}

.el-cascader {
  width: 15.625rem;
}

#basicInformation {
  // position:fixed;
  width: 100%;
  // height: auto;
  // top: 0;
  // left:0;
  // bottom: 3.3125rem;
  padding-bottom: 6.8rem;
  overflow: scroll;
  z-index: 999;
  background-color: #f5f5f5;
  height: 100%;
  -webkit-overflow-scrolling: touch; //ios中，通过overflow产生的scroll在滑动时会不流畅，添加上这个属性就能使其流畅滑动

  #edit-b {
    background-color: #fff;
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    padding: 1.0938rem 0.75rem;


    .bottom {
      padding: 0 0.875rem;
      font-size: 14px;
      padding-bottom: 0.625rem;

      h1 {
        line-height: 2.25rem;
        text-align: left;
        font-weight: normal;
      }

      .icon {
        padding-top: 1.125rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: #fafafa;
        font-size: 12px;

        i {
          padding: 0.125rem;
          background-color: #fff;
          border: solid 0.0625rem #ebebeb;
          border-radius: 1.25rem;
        }

        span {
          display: block;
          margin-top: 0.25rem;
        }
      }
    }

    .bottom {
      border-bottom: none;
    }
  }

  .otherphoto-uploader {
    padding: 1rem;
    width: 6.1875rem;
    height: 6.1875rem;
    border: 1px dashed #c0ccda;
    position: relative;
    border-radius: 0.5rem;
    margin: 0 .2rem .2rem;
  }

  .otherphoto-uploader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 0.1563rem;
    background: #AAAAB3;
  }

  .otherphoto-uploader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.5rem;
    width: 0.1563rem;
    background: #AAAAB3;
  }
  .flex{
    display: flex;
  }
  .details{
    border-bottom: 1px solid #F0F0F1;
    margin-bottom: 1.0625rem;
  }
  .otherphoto {
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.0938rem 0.75rem;
    background: white;

    .photobox {
      position: relative;
      width: 6.1875rem;
      height: 6.1875rem;
      /* float: left; */
      margin: 0 .2rem .2rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border:1px dotted #c0ccda;
      }

      i {
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: url("../../../../../assets/images/close_iocn.png");
        background-size: 100%;
      }
    }
  }

  #edit-c,
  #edit-a {
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #fff;

    ul {
      li {
        height: 2.75rem;
        line-height: 2.75rem;
        margin: 0 0.75rem;
        border-bottom: solid 1px #F0F0F1;
        font-size: 16px;
        text-align: left;

        input {
          border: none;
          color: #00001C;
          width: 54%;
          font-size: 0.8125rem;
        }
      }
    }
  }

  #edit-a {
    ul {
      li:last-child {
        border: none;

        i {
          font-size: 1.5rem;
          color: #c9c9c9;
          position: absolute;
          right: 0.875rem;
          line-height: 2.75rem;
        }

        input {
          font-size: 0.8125rem;
          color: #00001C;
        }
      }
    }
  }

  #edit-d {
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #fff;

    ul {
      li {
        height: 2.75rem;
        line-height: 2.75rem;
        margin: 0 0.75rem;
        border-bottom: solid 1px #F0F0F1;
        font-size: 0.8125rem;
        text-align: left;

        input {
          border: none;
        }
      }

      li:last-child {
        border: none;
      }
    }
  }

  .bottomPlaceholder {
    margin-top: 0.6875rem;
    height: 2.75rem;
    display: block;
  }

  .fenleiDiv {
    min-height: 60%;
    z-index: 9999 !important;
  }

  .imgflex {
    display: flex;
    flex-wrap: wrap;
  }
}

.supplierClass {
  // top: 40px!important;
}
</style>
